<template>
    <div>
      <!-- <video src="http://120.192.148.106:7086/live/cameraid/1000010%240/substream/1.m3u8" autoplay="true" controls="false" style="width: 300px;height:300px"></video> -->
      <el-row :gutter="20">
       <el-col :span="10" class="paddCol">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><i class="el-icon-menu"></i> {{item1Name}}</span>
               <el-button @click="del('1')"  class="danger" type="danger" size="small" style="margin-top:-8px;">删除</el-button>
               <el-button @click="set('1')" class="button" type="primary" size="small" style="margin-top:-8px;">设置</el-button>
            </div>
            <div style="text-align:center; height:230px;">
                <a :href="'//'+item1Ip" target="_blank">
                  
                    <svg class="icon" aria-hidden="true" v-if="this.item1Name !== '未配置'">
                        <use xlink:href="#icon-jiankong-copy"></use>
                    </svg>
                </a>
            </div>
          </el-card>
       </el-col>
       <el-col :span="10" class="paddCol">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><i class="el-icon-menu"></i> {{item2Name}}</span>
               <el-button @click="del('2')" class="danger" type="danger" size="small" style="margin-top:-8px;">删除</el-button>
               <el-button @click="set('2')" class="button" type="primary" size="small" style="margin-top:-8px;">设置</el-button>
            </div>
            <div style="text-align:center; height:230px;">
                 <a :href="'//'+item2Ip" target="_blank" rel="noopener noreferrer">
                <svg class="icon" aria-hidden="true" v-if="this.item2Name !== '未配置'">
                    <use xlink:href="#icon-jiankong-copy"></use>
                </svg>
                 </a>
            </div>
          </el-card>
       </el-col>
       
    </el-row>
    <el-row>
        <el-col :span="10" class="paddCol">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><i class="el-icon-menu"></i> {{item3Name}}</span>
               <el-button @click="del('3')"  class="danger" type="danger" size="small" style="margin-top:-8px;">删除</el-button>
               <el-button @click="set('3')" class="button" type="primary" size="small" style="margin-top:-8px;">设置</el-button>
            </div>
            <div style="text-align:center; height:230px;">
                 <a :href="'//'+item3Ip" target="_blank" rel="noopener noreferrer">
                <svg class="icon" aria-hidden="true"  v-if="this.item3Name !== '未配置'">
                    <use xlink:href="#icon-jiankong-copy"></use>
                </svg>
                 </a>
            </div>
          </el-card>
       </el-col>
       <el-col :span="10" class="paddCol">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><i class="el-icon-menu"></i> {{item4Name}}</span>
               <el-button @click="del('4')" class="danger" type="danger" size="small" style="margin-top:-8px;">删除</el-button>
               <el-button @click="set('4')" class="button" type="primary" size="small" style="margin-top:-8px;">设置</el-button>
            </div>
            <div style="text-align:center; height:230px;">
                 <a :href="'//'+item4Ip" target="_blank" rel="noopener noreferrer">
                <svg class="icon" aria-hidden="true"  v-if="this.item4Name !== '未配置'">
                    <use xlink:href="#icon-jiankong-copy"></use>
                </svg>
                 </a>
            </div>
          </el-card>
       </el-col>
    </el-row>
    
    <!-- 监控设置账户名密码等数据 -->
    <el-dialog
    :append-to-body="true"
    title="监控配置"
    :visible.sync="dialogVisible"
    width="30%">
       <el-form
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="监控IP地址">
          <el-input v-model="ruleForm.ip"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button
            type="primary"
            @click="submitForm()"
            size="medium"
            class="loginbutton"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return{
            data:'',
            dialogVisible:false,
            ruleForm: {
                ip:'',
                name:''
            },
            item1Name:'未配置',
            item2Name:'未配置',
            item3Name:'未配置',
            item4Name:'未配置',
            item1Ip:'',
            item2Ip:'',
            item3Ip:'',
            item4Ip:'',
            serial:''
        }
    },
    created() {
        this.getData()
    },
    methods:{
      go(e) {

      window.location.href = 'www.baidu.com'

      },
        getData() {
            var params = {
                    type: "getmedia",
                };
                this.$http.post(this.$baseUrl, params).then((res) => {
                    this.item1Name = res.data.media1 == '-' ? '未配置' : JSON.parse(res.data.media1)[0].name;
                    this.item1Ip = res.data.media1 == '-' ? '' : JSON.parse(res.data.media1)[0].ip;
                    this.item2Name = res.data.media2 == '-' ? '未配置' : JSON.parse(res.data.media2)[0].name;
                    this.item2Ip = res.data.media2 == '-' ? '' : JSON.parse(res.data.media2)[0].ip;
                    this.item3Name = res.data.media3 == '-' ? '未配置' : JSON.parse(res.data.media3)[0].name;
                    this.item3Ip = res.data.media3 == '-' ? '' : JSON.parse(res.data.media3)[0].ip;
                    this.item4Name = res.data.media4 == '-' ? '未配置' : JSON.parse(res.data.media4)[0].name;
                    this.item4Ip = res.data.media4 == '-' ? '' : JSON.parse(res.data.media4)[0].ip;
                })

        },
        set(val) {
            this.dialogVisible = true
            this.serial = val
            // this.ruleForm.ip = ''
            // this.ruleForm.name = ''
            if(val == 1) {
                this.ruleForm.ip = this.item1Ip
                this.ruleForm.name = this.item1Name
            } else if (val == 2) {
                this.ruleForm.ip = this.item2Ip
                this.ruleForm.name = this.item2Name
            }else if (val == 3) {
                this.ruleForm.ip = this.item3Ip
                this.ruleForm.name = this.ite31Name
            }else if (val == 4) {
                this.ruleForm.ip = this.item4Ip
                this.ruleForm.name = this.item4Name
            }
        },
        del(val) {
            this.serial = val;
              var media;
            if(this.serial ==  '1') {
                media = 'media1'
            }else if(this.serial ==  '2') {
                media = 'media2'
            }else if(this.serial ==  '3') {
                media = 'media3'
            }else if(this.serial ==  '4') {
                media = 'media4'
            }
               var params = {
                    type: "setmedia",
                    [media]: JSON.stringify([{
                        ip: '',    
                        name: '未配置'
                    }])
                };
                console.log(params)
                this.$http.post(this.$baseUrl, params).then((res) => {
                    this.getData()
                })
        },
        submitForm(){
            var media;
            if(this.serial ==  '1') {
                media = 'media1'
            }else if(this.serial ==  '2') {
                media = 'media2'
            }else if(this.serial ==  '3') {
                media = 'media3'
            }else if(this.serial ==  '4') {
                media = 'media4'
            }
               var params = {
                    type: "setmedia",
                    [media]: JSON.stringify([{
                        ip: this.ruleForm.ip,    
                        name: this.ruleForm.name
                    }])
                };
                console.log(params)
                this.$http.post(this.$baseUrl, params).then((res) => {
                    console.log(res.data)
                    if(res.data.result == 'ok') {
                        this.dialogVisible = false;
                        this.getData();
                    }
                })
        }
    }
}
</script>

<style scoped>
.el-card {
  background: none;
  color: #fff;
  border: 1px solid rgba(89, 129, 165, 0.4);
}
/deep/ .el-card__header {
  background: rgba(89, 129, 165, 0.2);

  border-bottom: none;
}
.paddCol{
    margin: 40px;
}
/deep/ .button{
  float:right;
  background: rgba(89, 129, 165, 0.6) !important;
    border: 1px solid rgba(89, 129, 165, 0.6)  !important;
}
.icon{
    font-size: 160px;
    color: #fff;
    margin-top: 30px;
}
deep/ .el-dialog {
  background: rgba(79, 112, 151, 0.4) !important;
  margin-top: 100px !important;
}
/deep/.login .el-dialog__header {
  background: rgba(0, 0, 0, 0.2);
  color: #fff !important;
}
/deep/.login .el-dialog__header .el-dialog__title {
  color: #fff !important;
}
/deep/ .el-form-item__label {
  color: #fff !important;
}
/deep/ .el-input__inner {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 80%;
  color: #fff;
}
/deep/ .el-dialog__title{
    color: #fff;
}
/deep/ .el-dialog__body{
    color: #fff;
}
/deep/ .el-input__inner {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
  color: #fff;
}
.danger{
    float: right;
    margin-left:10px ;
}
.content {
  height: 300px;
  width: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>